<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .vertical-tab {
        width: 920px;
        margin: 100px auto;
      }

      .vertical-tab .nav {
        list-style: none;
        width: 200px;
      }

      .vertical-tab .nav-tabs1 {
        border-right: 3px solid #e7e7e7;
      }

      .vertical-tab .nav-tabs2 {
        border-left: 3px solid #e7e7e7;
      }

      .vertical-tab .nav a {
        display: block;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 10px 20px;
        margin: 0 0 1px 0;
        text-decoration: none;
      }

      .vertical-tab .tab-content {
        color: #555;
        background-color: #fff;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 23px;
        padding: 10px 15px 10px 25px;
        display: table-cell;
        position: relative;
      }

      .vertical-tab .nav-tabs1 {
        float: left;
      }

      .vertical-tab .tabs {
        width: 500px;
        box-sizing: border-box;
        float: left;
      }

      .vertical-tab .tab-content h3 {
        font-weight: 600;
        text-transform: uppercase;
        margin: 0 0 5px 0;
      }

      .vertical-tab .nav-tabs2 {
        float: right;
      }

      .tab-content .tab-pane {
        display: none;
      }

      .tab-content .tab-pane.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="app" class="vertical-tab">
      <!-- 左侧tab栏 -->
      <ul class="nav nav-tabs1">
        <li
          v-for="(item,index) of list"
          :class="currentIndex == index ? 'active' : ''"
          @click="change(index)"
          v-if="index < 3"
        >
        <a href="#">{{item.title}}</a>
        </li>

        <!--        <li class="active" @click="change(index)"><a href="#"> Section 1 </a></li>
        <li class=""><a href="#"> Section 2 </a></li>
        <li class=""><a href="#"> Section 3 </a></li> -->
      </ul>
      <!-- 内容区域 -->
      <div class="tab-content tabs">
        <div
          v-for="(item,index) of list"
          :class="currentIndex == index ? classB  : classA"
        >
          <h3>{{item.title}}</h3>
          <p>{{item.content}}</p>
        </div>
      </div>
      <ul class="nav nav-tabs2">
        <!-- 右侧tab栏 -->
        <li
        v-for="(item,index) of list"
        :class="currentIndex == index ? 'active' : ''"
        @click="change(index)"
        v-if="index > 2"
      >
      <a href="#">{{item.title}}</a>
      </li>

        <!-- <li class=""><a href="#"> Section 4 </a></li>
        <li class=""><a href="#"> Section 5 </a></li>
        <li class=""><a href="#"> Section 6 </a></li> -->
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          classA: "tab-pane fade",
          classB: "tab-pane fade active",
          currentIndex: 0,
          list: [
            {
              id: 1,
              title: "Section 1",
              content: "content1",
            },
            {
              id: 2,
              title: "Section 2",
              content: "content2",
            },
            {
              id: 3,
              title: "Section 3",
              content: "content3",
            },
            {
              id: 4,
              title: "Section 4",
              content: "content4",
            },
            {
              id: 5,
              title: "Section 5",
              content: "content5",
            },
            {
              id: 6,
              title: "Section 6",
              content: "content6",
            },
          ],
        },
        methods: {
          change(i) {
            this.currentIndex = i;
          },
        },
      });
    </script>
  </body>
</html>
